import './App.css'
import { BrowserRouter as Router } from 'react-router-dom'
import AppRoutes from '@/router/index'
import { Suspense } from 'react'

function App() {
  return (
    /* v6使用路由方法 */
    <>
      <Router>
        <div className="app">
          <Suspense
            fallback={
              <div
                style={{
                  textAlign: 'center',
                  marginTop: 200
                }}
              >
                loading...
              </div>
            }
          >
            <AppRoutes></AppRoutes>
          </Suspense>
        </div>
      </Router>
    </>
  )
  /* v5使用路由方法 */
  // return (
  //   <>
  //     <Router>
  //       <div className="app">
  //         <Routes>
  //           {/* <PrivateRoute path="/profile/edit" element={<ProfileEdit></ProfileEdit>}></PrivateRoute> */}
  //           <Route path="/" element={<Navigate to="/layout"></Navigate>}></Route>
  //           <Route path="/layout/*" element={<Layout></Layout>}></Route>
  //           <Route path="/login" element={<Login></Login>}></Route>
  //           <Route
  //             path="/profile/edit"
  //             element={
  //               <PrivateRoute>
  //                 <ProfileEdit></ProfileEdit>
  //               </PrivateRoute>
  //             }
  //           ></Route>
  //         </Routes>
  //       </div>
  //     </Router>
  //   </>
  // )
}

export default App
